<template>
  <div id="app">
    <ul class="main">
      <li class="main_page" id="nav">
        <div class="nav_top">
          <div class="nav_icons ">
            <div class="icons_img"><img src="./assets/icon1.png" alt=""></div>
            <div class="icons_img"><img src="./assets/icon2.png" alt=""></div>
          </div>
          <div class="nav_main clearfix">
            <div class="nav_main_bar " v-for="(list,index) in navList" :key="index"><a :href="list.href">{{list.name}}</a></div>
          </div>
        </div>
        <div class="nav_background"><img src="./assets/background.jpg" alt=""></div>
      </li>
      <li class="main_page" id="solutions">
        <div class="solutions_title">重庆作为菜鸟在重庆区域的唯一服务商，主要是为商家提“B2B/B2C”一体化供应链
          解决方案服务，专注为商家提供物流解决方案，输出物流仓储配送等物流资源。 </div>
        <div class="solutions_main">
          <h1>一站式仓配解决方案</h1>
          <h2>仓储+配送+系统</h2>
        </div>

        <div class="solutions_solution">
          <div class="solutions_solution_body">
            <p>仓网全国覆盖，缩短配送距离，提高配送时效</p>
            <img src="./assets/list1.png" alt="">
            <span>分仓物流机构</span>
          </div>
          <div class="solutions_solution_body">
            <p>免费提供智能发货引擎，匹配最优配送方式</p>
            <img src="./assets/list2.jpg" alt="">
            <span>快递优选服务</span>
          </div>
          <div class="solutions_solution_body">
            <p>ERP合作伙伴有万里牛，网店管家，百胜，千盛</p>
            <img src="./assets/list3.jpg" alt="">
            <span>免费erp使用</span>
          </div>
        </div>
      </li>
      <li class="main_page" id="services">
        <div class="services_title">云仓服务</div>
        <div class="services_discribe">我们要做的是为每个客户量身定制方案，让后端发货无忧
        </div>
        <div class="services_list">
          <div class="services_list_body">
            <img src="./assets/cang1.png" alt="">
            <p>经历过多次双十一等大促活动，有着丰富的电商托管经验</p>
          </div>
          <div class="services_list_body">
            <img src="./assets/cang2.png" alt="">
            <p>使用ERP系统管理，降低成本，精确管理库存，提高效率</p>
          </div>
          <div class="services_list_body">
            <img src="./assets/cang3.jpg" alt="">
            <p>定制化服务，合理规划仓库面积，弹性的人员管理</p>
          </div>
        </div>
      </li>
      <li class="main_page" id="value">
        <div class="value_title">仓网价值 </div>
        <div class="value_values">
          <div class="value_values_wrap" v-for="(list,index) in valueList1" :key="index">
            <div class="value_values_wrap_title">{{list.title}}</div>
            <div class="value_values_wrap_detail">{{list.detail}}</div>
          </div>
        </div>
        <div class="value_values">
          <div class="value_values_wrap" v-for="(list,index) in valueList2" :key="index+'list'">
            <div class="value_values_wrap_title">{{list.title}}</div>
            <div class="value_values_wrap_detail">{{list.detail}}</div>
          </div>
        </div>
      </li>
      <li class="main_page" id="industry-solutions">
        <div class="industry-solutions_title">行业解决方案</div>
        <div class="industry-solutions_list">
          <div class="industry-solutions_list_body" v-for="(list,index) in industrySolutionsList" :key="index">
            <div class="solutions_list_body_title">{{list.title}}</div>
            <div class="solutions_list_detail">{{list.detail}}</div>
          </div>
        </div>
      </li>
      <li class="main_page" id="advantage">
        <div class="advantage_title">我们的优势</div>
        <div class="advantage_list">
          <div class="advantage_list_body">
            <div class="advantage_list_body_img"><img src="./assets/advan1.png" alt=""></div>
            <div class="advantage_list_body_title">一站式仓储解决方案</div>
            <div class="advantage_list_body_detail">A.菜鸟背书的一站式仓储、作业、配送方案，解决您的后顾之忧

              B.支持所有当前主流的零售平台发货需求

              C.服务质量由菜鸟平台监控，保障商家权益</div>
          </div>
          <div class="advantage_list_body">
            <div class="advantage_list_body_img"><img src="./assets/advan2.png" alt=""></div>
            <div class="advantage_list_body_title">多行业覆盖</div>
            <div class="advantage_list_body_detail">A.丰富的行业服务经验，覆盖鞋服、家电、清洁日化、百货、化妆品等主流消费品类

              B.所有行业解决方案为菜鸟仓储联盟根据行业需求定制，更契合行业需求</div>
          </div>
          <div class="advantage_list_body">
            <div class="advantage_list_body_img"><img src="./assets/advan3.png" alt=""></div>
            <div class="advantage_list_body_title">本地化专家服务</div>
            <div class="advantage_list_body_detail">A.专家团队全国覆盖

              B.由多年仓配一体经验的专业人员组成，迅速高效</div>
          </div>
        </div>
        <div class="advantage_list">
          <div class="advantage_list_body">
            <div class="advantage_list_body_img"><img src="./assets/advan4.png" alt=""></div>
            <div class="advantage_list_body_title">全国的仓网覆盖

            </div>
            <div class="advantage_list_body_detail">
              A.全国性的仓网布局，支持多地快递分仓，货品下沉等业务需求
              B.高效的仓网协同，提升整体物流效率</div>
          </div>
          <div class="advantage_list_body">
            <div class="advantage_list_body_img"><img src="./assets/advan5.png" alt=""></div>
            <div class="advantage_list_body_title">丰富的大促经验</div>
            <div class="advantage_list_body_detail">
              A.预包装、货品下沉、弹性仓容、人员招聘等大促期间仓容紧张、发货紧张等问题

              B.全链路系统压测与保障，大单量负载缓冲，资损监控预警

              C.配送网络高效合作协同，保障菜鸟仓储联盟大促期间配送无忧</div>
          </div>
          <div class="advantage_list_body">
            <div class="advantage_list_body_img"><img src="./assets/advan6.png" alt=""></div>
            <div class="advantage_list_body_title">强大的技术保障能力</div>
            <div class="advantage_list_body_detail">
              A.专业WMS、TMS物流系统解决方案，强大的云计算大数据处理能力，保障系统安全

              B.经验丰富的系统实施、培训和服务人员，极大降低入仓周期和成本</div>
          </div>
        </div>
      </li>
      <li class="main_page" id="about-us">
        <div class="about-us_title">关于我们</div>
        <div class="about-us_main">
          重庆尔吾网络科技有限公司成立于2014年，主营物流仓储服务，包含B2B/B2C业务；现有专业的技术团队、专业的仓库服务专家，我公司一直本着“客户第一，诚信至上”的原则，秉承着“信任、诚实和富有责任感“为理念，致力于每位客户的满意和成功
          。
          2017年尔吾网络正式加入菜鸟，尔吾网络是菜鸟仓储联盟重庆区域服务商，主要负责菜鸟在重庆区域仓储的招商认证及提供仓配一体服务，现目前在跑单量达到3.5万单，合作伙伴有25家，欢迎各仓储、物流及供应链公司、各大企业洽谈合作，共享阿里巴巴电商大市场。

        </div>
        <div class="about-us_icons">
          <div class="about-us_icons_body"><a href="//56.cainiao.com"><img src="./assets/cainiaoicon.png" alt=""></a></div>
          <div class="about-us_icons_body"><img class="about-us_icons_active" src="./assets/icon1.png" alt="">
            <img src="./assets/detail.png" class="about-us_icons_unactive" alt=""></div>
        </div>
      </li>
      <li class="main_page" id="footer">
        <div class="footer_title">您的需求在哪里，我们的仓就在哪里
        </div>
        <div class="footer_card">
          <div class="footer_card_body">
            <h2>重庆市渝北区金童路9号叠彩城公寓楼24-5</h2>
          </div>
          <div class="footer_card_body"><strong>联系我们：</strong>                       电话：17726682731
            邮箱：12914913@@qq.com</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  // import HelloWorld from './components/HelloWorld.vue'

  export default {
    name: 'app',
    data() {
      return {
        navList: [{
            name: '网站首页',
            href: '#nav'
          },
          {
            name: '仓储服务',
            href: '#solutions'
          },
          {
            name: '仓网价值',
            href: '#value'
          },
          {
            name: '方案优势',
            href: '#industry-solutions'
          },
          {
            name: '关于我们',
            href: '#about-us'
          },
          {
            name: '联系我们',
            href: '#footer'
          }
        ],
        valueList1: [{
          title: '区域订单满足',
          detail: '减少分配环节，降低破碎，遗失等一场风险'
        }, {
          title: '分仓物流结构',
          detail: '全国网络化分仓，缩短平均配送距离，大幅度提升配送时效'
        }, {
          title: '优选快递组合',
          detail: '选择最有快递，提高物流速度'
        }],
        valueList2: [{
            title: '洪峰订单满足',
            detail: '解决双十一，双十二等大促活动，达到24小时到货'
          },
          {
            title: '次日达占比提高',
            detail: '提升时效，降低配送成本，获取更多流量'
          }
        ],
        industrySolutionsList: [{
          title: '食品与保健品',
          detail: '食品行业产品的有效期和检疫期要求很严格，必须提供相应的储存环境、管理体系进行保存、配送包装管理，并进行产品全过程的跟踪，提供产品出入库，盘点周期抽检、全检等流程'
        }, {
          title: '服装鞋服类',
          detail: '商品多SKU、高退货率，产品季节性强，要选择鞋服行业有成功经验的服务商，在非标品入库及逆向处理有成熟经验，标准化的发货作业流程，全流程条码管理，确保库存的准确率和发货率'
        }, {
          title: '美妆护肤',
          detail: '产品高货值，易破碎、发货容易窜货，赠品多要包要求高。寻找仓配时看是否可进行完善的条码化管理，有无定制包装能力，库存系统支持赠品规则应对复杂促销等等'
        }, {
          title: '3C小家电',
          detail: '由于货值高所以可追溯要求高，服务上要选择能真正在入仓、发货、退仓、库内转移等各个环节实现全程序列号管理的仓库'
        }],
      };
    }
    // components: {
    //   HelloWorld
    // }
  };
</script>

<style>
  body {
    background: #f9f9f9;
  }

  #nav,
  #services,
  #industry-solutions,
  #about-us {
    background: #fff;
  }

  #solutions,
  #value,
  #advantage,
  #footer {
    background: #f5f5f5;
  }

  #app .main .main_page {
    width: 100%;
    /* max-width:1280px; */
    /* padding:0 ; */
    /* height: 800px; */

    /* padding: 10px 0; */
  }

  #nav {}

  #nav .nav_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #nav .nav_icons div {
    float: left;
    margin: 0 10px 0 0;
  }

  #nav .nav_main {
    display: flex;
    justify-content: flex-start;
  }

  #nav .nav_main .nav_main_bar {
    margin: 10px 10px;
  }

  #nav .nav_main .nav_main_bar a {
    font-size: 18px;
    color: black;
  }

  #nav .nav_main .nav_main_bar a:hover {
    color: gray;
  }

  #nav .nav_icons img {
    height: 60px;
  }

  #nav .nav_background img {
    width: 100%;
  }

  #solutions {
    padding-top: 40px;
    /* background: gray; */
  }

  #solutions .solutions_title {
    max-width: 500px;
    text-align: center;
    margin: 0 auto 80px;
    font-size: 16px;
  }

  #solutions .solutions_main {
    text-align: center;
    margin-bottom: 80px;
  }

  #solutions .solutions_main h1 {
    margin-bottom: 10px;
    font-size: 28px;
  }

  #solutions .solutions_main h2 {
    font-size: 22px;
  }

  #solutions .solutions_solution {
    display: flex;
    justify-content: space-between;
  }

  #solutions .solutions_solution .solutions_solution_body {
    position: relative;
  }

  #solutions .solutions_solution img {
    width: 300px;
    height: 200px;
  }

  #solutions .solutions_solution span {
    position: absolute;
    bottom: 0;
    width: 300px;
    left: 0;
    text-align: center;
    bottom: 5px;
    font-size: 18px;
  }

  #solutions .solutions_solution p {
    position: absolute;
    bottom: -60px;
    width: 300px;
    font-size: 16px;
    text-align: center;
  }

  #services {
    margin-top: 120px;
    padding-top: 60px;
  }

  #services .services_title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
  }

  #services .services_discribe {
    font-size: 20px;
    text-align: center;
    margin-bottom: 60px;
  }

  #services .services_list {
    display: flex;
    justify-content: space-between;
    padding-bottom: 60px;
  }

  #services .services_list img {
    width: 300px;
    height: 200px;
    margin-bottom: 20px;
  }

  #services .services_list p {
    text-align: center;
    width: 300px;
  }

  #value {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #value .value_title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
  }

  #value .value_values {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
    text-align: center;
  }

  #value .value_values .value_values_wrap_title {
    font-size: 24px;
    margin-bottom: 10px;
  }

  #value .value_values .value_values_wrap_detail {
    max-width: 200px;
  }

  #industry-solutions {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #industry-solutions .industry-solutions_title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
  }

  #industry-solutions .industry-solutions_list {
    display: flex;
    justify-content: space-around;
    text-align: center;
  }

  #industry-solutions .industry-solutions_list .solutions_list_body_title {
    margin-bottom: 30px;
  }


  #industry-solutions .industry-solutions_list_body .solutions_list_detail {
    /* display: none; */
    max-width: 200px;
  }

  #advantage {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #advantage .advantage_title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
  }

  #advantage .advantage_list {
    display: flex;
    justify-content: space-between;
    text-align: center;
  }

  #advantage .advantage_list img {
    width: 300px;
    height: 200px;
    margin-bottom: 20px;
  }

  #advantage .advantage_list .advantage_list_body_title {
    font-size: 20px;
    margin-bottom: 40px;
  }

  #advantage .advantage_list .advantage_list_body_detail {
    max-width: 300px;
    margin-bottom: 40px;
  }

  #about-us {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #about-us .about-us_title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
  }

  #about-us .about-us_main {
    text-align: center;
    font-size: 16px;
    margin-bottom: 40px;
  }

  #about-us .about-us_icons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
  }

  #about-us .about-us_icons img {
    width: 400px;
    height: 400px;
  }

  #about-us .about-us_icons .about-us_icons_active {}

  #about-us .about-us_icons .about-us_icons_unactive {
    display: none;
  }

  #footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #footer .footer_title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
  }

  #footer .footer_card {
    text-align: center;
    /* display: flex;
    justify-content: space-between; */
  }

  #footer .footer_card_body h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  #footer .footer_card_body strong {
    font-weight: 700;
    font-size: 18px;
  }

  #footer .footer_card_body {}
</style>